<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法4:v-model双向绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：v-model双向绑定</h1>
        <h3>我们可以使用v-model指令在表单input、textarea、select等元素进行双向绑定
            它会根据控件的类型自动获取正确的方法来更新元素，
            v-model会忽略所有表单元素的value、checked、selected等属性的初始值，
            它始终会将当前的JavaScript状态视为数据的正确来源
        </h3>
        <h3>1.单行文本框</h3>
        用户名:<input type="text" v-model="singleText"><br>
        输入的用户名是:{{singleText}}
        <h3>2.多行文本框</h3>
        个人简介：<textarea name="" id="" v-model="multiText"></textarea><br>
        输入的个人简介是：{{multiText}}
        <h3>3.单选框</h3>
        <h4>单选框在实际中是不能单独使用的，一般是两个以上，要设置一个v-model统一变量，
            这样就可以实现radiogroup的效果
        </h4>
        性别：<input type="radio" value="M" v-model="radioValue">美女
        <input type="radio" value="F" v-model="radioValue">帅哥<br>
        输入的性别是：{{radioValue}}
        <h3>4.单个复选框：常用true或false的选择</h3>
        <input type="checkbox" v-model="toggleValue">是否天生丽质人神共愤
        <br>选择的结果是：{{toggleValue}}
        <h3>5.多个复选框：使用v-model接受数组类型的变量</h3>
        <input type="checkbox" value="漂亮" v-model="checkedValues">回眸一笑百媚生
        <input type="checkbox" value="纤细" v-model="checkedValues">体轻能为掌上舞
        <input type="checkbox" value="侠义" v-model="checkedValues">路见不平一声吼<br>
        你选中的品质是：{{checkedValues.join(',')}}
        <h3>6.单向下拉框</h3>
        <select name="" id="" v-model="singleSelect">
            <option value="杭州">杭州</option>
            <option value="台州">台州</option>
            <option value="温州">温州</option>
            <option value="湖州">湖州</option>
        </select>
        <p>原来你是{{singleSelect}}来的啊!</p>
        <h3>7.多项选择框</h3>
        <select name="" id="" multiple v-model="multiSelect">
            <option value="a">吃饭</option>
            <option value="b">喝水</option>
            <option value="c">跳舞</option>
        </select>
        <p>你的选择有这些：{{multiSelect.join(',')}}</p>
        <h1>课堂小练习</h1>
        用户名:<input type="text" v-model="User"><p>
         密码:<input type="password" v-model="PassWord" @blur="checkPassword" ref="passwordInput"><p>
        确认密码:<input type="password" v-model="QPassword" @blur="checkPassword" ref="confirmInput"><p>
        性别：
        <input type="radio" value="女" v-model="xb">女
        <input type="radio" value="男" v-model="xb">男<p>
        籍贯：
        <select name="" id="" v-model="jig">
            <option value="杭州">杭州</option>
            <option value="台州">台州</option>
            <option value="温州">温州</option>
            <option value="湖州">湖州</option>
        </select><p>
        选择的课外教程： 
        <input type="checkbox" value="吉他" v-model="jc">吉他
        <input type="checkbox" value="国画" v-model="jc">国画
        <input type="checkbox" value="街舞" v-model="jc">街舞
        <input type="checkbox" value="书法" v-model="jc">书法<p>
        <button @click="submit()">提交</button>
        <h1>知识点2：v-model 修饰符</h1>
        <h3>1. .lazy 修饰符 v-model在每次input事件触发后输入框的数据与变量同步进行，添加lazy修饰符后，转变为change事件同步</h3>
        <input type="text" v-model.lazy="text">{{text}}
        <h3>2 .number 修饰符</h3>
        <input type="text" name="" v-model.number= "num">{{num+1}}
        <h3>3. .trim 修饰符 可以自动过滤前后的空格</h3>
        <input type="text" v-model="text">{{text+"你好"}}
    </div>
</body>
</html>
<script>
    const connApp = Vue.createApp({
        data() {
            return {
                singleText:'我是初始值',
                multiText:'我是无敌霸王花',
                radioValue:'',
                toggleValue:false,
                checkedValues:[],
                singleSelect:'',
                multiSelect:[],
                User:'',
                PassWord:'',
                QPassword:'',
                xb:'',
                jig:'',
                jc:[],
                text:'',
                num:''
            }
        },
        methods: {
                checkPassword() {
                if (this.PassWord && this.QPassword && this.PassWord !== this.QPassword) {
                    alert('密码与确认密码不一致，请重新输入！');
                    this.PassWord  = '' ;
                    this.QPassword = '';
                }
            },
            submit(){
                if (!this.PassWord || !this.QPassword) {
                    alert('请输入密码和确认密码');
                    return;
                }
          alert("尊敬的"+this.jig +this.User+"用户，你是一位"+this.xb+"性，你选择的课程是："+this.jc.join('、'));
        }
      }
            }
    ).mount("#app")
</script>